<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Toggle</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
</head>
<body>
  <ion-app>

      <ion-header>
        <ion-toolbar>
          <ion-title>Toggle</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content id="content">

        <ion-list>
          <ion-item>
            <ion-label>Apple</ion-label>
            <ion-toggle slot="start" name="apple" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Banana</ion-label>
            <ion-toggle slot="start" name="banana" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Cherry, disabled</ion-label>
            <ion-toggle slot="start" color="danger" name="cherry" disabled></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Grape, checked, disabled</ion-label>
            <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Kiwi, (ionChange) Secondary color</ion-label>
            <ion-toggle slot="start" color="secondary" (ionChange)="kiwiChange($event)"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Strawberry, (ionChange) checked="true"</ion-label>
            <ion-toggle slot="start" color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Checkbox right, checked, really long text that should ellipsis</ion-label>
            <ion-toggle slot="end" color="danger" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Checkbox right side</ion-label>
            <ion-toggle slot="end" checked></ion-toggle>
          </ion-item>

          <ion-item>
            <ion-label>Button w/ right side default icon, really long text that should ellipsis</ion-label>
            <ion-icon name="information-circle" slot="end"></ion-icon>
          </ion-item>

        </ion-list>


        <p aria-hidden="true" text-center>
          <ion-button onClick="toggleBoolean('grapeChecked', 'checked')" fill="outline" size="small">Grape Checked</ion-button>
          <ion-button onClick="toggleBoolean('grapeChecked', 'disabled')" fill="outline" size="small">Grape Disabled</ion-button>
          <ion-button onClick="printForm()" fill="outline" size="small">Print Form</ion-button>
        </p>

        <p>
          <ion-toggle id="standAloneChecked"></ion-toggle>
          Stand-alone toggle: <span id="standAloneCheckedSpan"></span>
        </p>
      </ion-content>

    <script>
      function printForm(ev) {
        console.log('TODO get working with forms');
      }

      function toggleBoolean(id, prop) {
        var el = document.getElementById(id);

        var isTrue = el[prop] ? false : true;
        el[prop] = isTrue;
        console.log('in toggleBoolean, setting', prop, 'to', isTrue);
      }
    </script>

  </ion-app>
</body>
</html>



